<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <div class="body">
                <div class="main">
                    <div class="table-tip">
                        <div class="left-top">
                            <div class="tip-title"
                                ><svg
                                    class="svg-icon"
                                    xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="16px"
                                    height="16px"
                                    viewBox="0 0 16 16"
                                    version="1.1"
                                >
                                    <title>年度目标</title>
                                    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="年度目标表" transform="translate(-263, -109)">
                                            <g id="编组-9" transform="translate(263, 107)">
                                                <g id="年度目标" transform="translate(0, 2)">
                                                    <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                    <g id="编组" fill="#3875FF" fill-rule="nonzero">
                                                        <polygon
                                                            id="路径"
                                                            points="12.0679421 0.887967102 9.69497586 3.00432684 9.42320758 5.39560164 6.16942607 8.19481495 7.11889862 9.21952441 10.3057393 6.28271053 12.8137315 6.35136778 15.1861255 4.09826569 16 3.34675487 12.9496156 3.14078312 13.1524406 0"
                                                        />
                                                        <path
                                                            d="M7.25449669,5.87305561 C6.10219918,5.87305561 5.08492759,6.82967996 5.08492759,8.05864473 C5.08492759,9.28760951 6.03411407,10.1755766 7.25449669,10.1755766 C8.40650814,10.1755766 9.35598069,9.21923833 9.35598069,8.05864473 L7.25449669,8.05864473 L7.66071876,5.94171286 C7.52569283,5.87305561 7.39009476,5.87305561 7.25449669,5.87305561 L7.25449669,5.87305561 Z"
                                                            id="路径"
                                                        />
                                                        <path
                                                            d="M10.8475594,7.99027356 C10.8475594,9.97046308 9.22009655,11.609941 7.25449669,11.609941 C5.28832469,11.609941 3.66114786,9.97074915 3.66114786,7.99027356 C3.66114786,6.00979796 5.28832469,4.37060611 7.25421062,4.37060611 C7.5259789,4.37060611 7.72851779,4.37060611 8,4.43926336 L8.74578938,0.81902378 C8.27148221,0.750652601 7.79631682,0.682281423 7.25421062,0.682281423 C3.25463973,0.682281423 0,3.96066512 0,7.98998748 C0,12.0190238 3.25463973,15.2974075 7.25421062,15.2974075 C11.1868407,15.2974075 14.3728232,12.1557661 14.5087073,8.2634722 L14.5087073,8.05835866 L10.8475594,7.98970141 L10.8475594,7.99027356 Z"
                                                            id="路径"
                                                        />
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g></svg
                                >年度目标</div
                            >
                        </div>
                        <div class="right-top"
                            ><div class="tip1" v-for="(item, index) in tipList"
                                ><span class="tip-msg">{{ item.title }}</span
                                ><div class="box1" :style="{ backgroundColor: item.color }"></div
                            ></div>
                        </div>
                    </div>
                    <div class="no-data-img" v-if="state.radioValue === ''">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="265px"
                            height="192px"
                            viewBox="0 0 265 192"
                            version="1.1"
                        >
                            <title>暂无待办事项</title>
                            <defs>
                                <linearGradient
                                    x1="50%"
                                    y1="85.1278551%"
                                    x2="50%"
                                    y2="-24.3022005%"
                                    id="linearGradient-1"
                                >
                                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                </linearGradient>
                                <linearGradient
                                    x1="50%"
                                    y1="85.1278551%"
                                    x2="50%"
                                    y2="-24.3022005%"
                                    id="linearGradient-2"
                                >
                                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                </linearGradient>
                                <linearGradient
                                    x1="50%"
                                    y1="85.1278551%"
                                    x2="50%"
                                    y2="-24.3022005%"
                                    id="linearGradient-3"
                                >
                                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                    <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                </linearGradient>
                                <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                                    <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                    <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                                </linearGradient>
                                <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                                    <stop stop-color="#9CBEF7" offset="0%" />
                                    <stop stop-color="#96D1F7" offset="100%" />
                                </linearGradient>
                                <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                                    <stop stop-color="#9CBEF7" offset="0%" />
                                    <stop stop-color="#96D1F7" offset="100%" />
                                </linearGradient>
                            </defs>
                            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                                    <g id="暂无待办事项" transform="translate(927, 470)">
                                        <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                                            <path
                                                d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                                                id="形状结合备份"
                                                fill="url(#linearGradient-1)"
                                            />
                                            <path
                                                d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                                                id="形状结合"
                                                fill="url(#linearGradient-2)"
                                                transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                                            />
                                            <path
                                                d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                                                id="形状结合备份-2"
                                                fill="url(#linearGradient-3)"
                                            />
                                            <g id="编组-50" transform="translate(1.6, 76.8)">
                                                <ellipse
                                                    id="椭圆形"
                                                    fill="url(#linearGradient-4)"
                                                    cx="131.6"
                                                    cy="57.6"
                                                    rx="131.6"
                                                    ry="57.6"
                                                />
                                                <g id="编组-46" transform="translate(30.4, 4.8)">
                                                    <rect
                                                        id="矩形"
                                                        fill="#D7E3FF"
                                                        x="6.4"
                                                        y="20"
                                                        width="2.4"
                                                        height="12"
                                                    />
                                                    <path
                                                        d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                                                        id="椭圆形"
                                                        fill="#EAF0FF"
                                                    />
                                                </g>
                                                <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                                                    <rect
                                                        id="矩形"
                                                        fill="#D7E3FF"
                                                        x="4.97664"
                                                        y="13.824"
                                                        width="1.65888"
                                                        height="8.2944"
                                                    />
                                                    <path
                                                        d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                                                        id="椭圆形"
                                                        fill="#EAF0FF"
                                                    />
                                                </g>
                                                <g id="编组-46备份" transform="translate(245.6, 21.6)">
                                                    <rect
                                                        id="矩形"
                                                        fill="#D7E3FF"
                                                        x="3.6"
                                                        y="10"
                                                        width="1.2"
                                                        height="6"
                                                    />
                                                    <path
                                                        d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                                                        id="椭圆形"
                                                        fill="#EAF0FF"
                                                    />
                                                </g>
                                            </g>
                                        </g>
                                        <g id="编组-61" transform="translate(89.6, 21.6)">
                                            <ellipse
                                                id="椭圆形"
                                                fill="#E2EBFF"
                                                fill-rule="nonzero"
                                                cx="42.8"
                                                cy="80"
                                                rx="42.8"
                                                ry="4.8"
                                            />
                                            <rect
                                                id="矩形备份-91"
                                                fill="url(#linearGradient-5)"
                                                x="5.6"
                                                y="0"
                                                width="70.4"
                                                height="80.8"
                                                rx="3.2"
                                            />
                                            <g
                                                id="编组-60"
                                                transform="translate(20.8, 28)"
                                                fill="#FFFFFF"
                                                fill-rule="nonzero"
                                            >
                                                <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                                                <rect
                                                    id="矩形备份-92"
                                                    x="0"
                                                    y="15.2"
                                                    width="40"
                                                    height="3.2"
                                                    rx="1.6"
                                                />
                                                <rect
                                                    id="矩形备份-93"
                                                    x="0"
                                                    y="30.4"
                                                    width="40"
                                                    height="3.2"
                                                    rx="1.6"
                                                />
                                            </g>
                                            <path
                                                d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                                                id="矩形"
                                                fill="#FFFFFF"
                                                fill-rule="nonzero"
                                            />
                                            <rect
                                                id="矩形备份-94"
                                                fill="url(#linearGradient-6)"
                                                x="29.6"
                                                y="0"
                                                width="23.2"
                                                height="3.2"
                                                rx="1.6"
                                            />
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                        <div class="no-data-msg">暂无数据</div>
                    </div>
                    <div class="kb-table-box" v-else>
                        <a-table
                            :columns="columns"
                            :dataSource="state.dataSource"
                            :scroll="{ x: 'max-content', y: '80vh' }"
                            :pagination="false"
                            :loading="state.tableLoading"
                            bordered
                        >
                            <template #headerCell="{ column, title }">
                                <div
                                    v-if="column.current"
                                    style="
                                        width: 100%;
                                        background-color: #ffa940;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    "
                                    >{{ title }}</div
                                >
                                <div v-else>{{ title }}</div>
                            </template>

                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="['实际进展'].includes(column.title)">
                                    <div v-if="record.reached == 'middle'" style="color: #262626">{{ text }}</div>
                                    <div v-if="record.reached == true" style="color: #52c41a">{{ text }}</div>
                                    <div v-if="record.reached == false" style="color: #ff2a00">{{ text }}</div>
                                </template>
                                <template v-if="column.current">
                                    <div
                                        style="
                                            background-color: rgba(255, 169, 64, 0.2);
                                            height: 50px;
                                            line-height: 50px;
                                        "
                                        >{{ text }}</div
                                    >
                                </template>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>

            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================

    onMounted(async () => {
        getData()
    })
    const radioStyle = reactive({
        display: 'flex',
        height: '30px',
        lineHeight: '30px'
    })
    const state = reactive({
        exportLoading: false,
        dataSource: [],
        permission: false,
        tableLoading: false
    })
    const tipList = [
        {
            title: '当前时间范围',
            color: '#FFA940'
        },
        {
            title: '达成目标',
            color: '#73D13D'
        },
        {
            title: '未达成目标',
            color: '#F5222D'
        }
    ]
    const customCellStyle = () => {
        return {
            style: {
                padding: '0'
            }
        }
    }
    const columns = ref([])
    // 获取数据
    function getData() {
        state.tableLoading = true
        post('/solution-ppm/api/v2/built-in-system-ppm/year_goals/search', {
            configAreaId: state.radioValue
        })
            .then(data => {
                if (data.code !== 200) {
                    state.dataSource = []
                    message.error(data.message)
                    return
                }
                columns.value = data.data.dataColumnDtoList
                columns.value.forEach(item => {
                    item.align = 'center'
                    item.width = '100px'
                    if (item.title == '阶段') {
                        item.width = '250px'
                    }
                    if (item.title.includes('当前计划')) {
                        item.width = '200px'
                    }
                })

                state.dataSource = data.data.dataSourceDtoList.map(item => {
                    const { id, milepostName, yearGoalsDataDtoMap } = item
                    const { actualProgress, currentPlan } = yearGoalsDataDtoMap

                    const formattedItem = {
                        id,
                        milepostName,
                        actualProgress: actualProgress.numbers,
                        currentPlan: currentPlan.numbers
                    }

                    Object.keys(yearGoalsDataDtoMap).forEach(key => {
                        if (key !== 'actualProgress' && key !== 'currentPlan') {
                            formattedItem[key] = yearGoalsDataDtoMap[key].numbers
                        }
                    })

                    if (currentPlan.numbers == 0 && actualProgress.numbers == 0) {
                        formattedItem.reached = 'middle'
                    } else {
                        formattedItem.reached = currentPlan.reached
                    }

                    return formattedItem
                })
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/

    .body {
        background-color: #f0f2f5;
        height: 100%;
    }
    .top-tab {
        height: 65px;
        padding: 16px 24px;
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 2px;
    }
    .kb-table-box {
        padding: 0 24px;
        border-radius: 2px;
        background-color: #fff;
    }
    .time-div {
        display: flex;
        flex-direction: column;
        height: 65px;
    }
    .reality-time,
    .plan-time {
        height: 32px;
        width: 100%;
        text-align: center;
        line-height: 32px;
    }
    .plan-time {
        border-bottom: 1px solid #d9d9d9;
    }
    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: rgba(56, 117, 255, 0.2);
        color: #262626;
        font-weight: 600;
        padding: 0;
        height: 40px;
        border-right: 1px solid #d9d9d9 !important;
    }

    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 0px 0px;
        word-break: break-all;
        background-color: #fafafa;
    }

    .record-top,
    .record-bottom {
        display: flex;
        height: 32px;
    }
    .record-top {
        border-bottom: 1px solid #d9d9d9;
    }
    .extension,
    .normal,
    .planning {
        width: 25%;
        height: 32px;
        background-color: orange;
    }
    .normal {
        background-color: normal;
    }
    .planning {
        background-color: planning;
    }
    .table-tip {
        background-color: #fff;
        display: flex;
        height: 45px;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
        margin-bottom: 16px;
    }

    .finish,
    .running,
    .daily {
        display: flex;
        line-height: 62px;
        margin-right: 13px;
    }

    .left-top {
        height: 42px;
        display: flex;
        justify-content: start;
        background: #f6f6f6;
        border-radius: 4px;
        padding: 8px 16px;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: end;
    }

    .tip-msg {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 8px;
    }

    .running-box {
        background: #aae56a;
    }

    .daily-box {
        background: #faba32;
    }
    .main {
        height: 100%;
        background-color: #fff;
        padding-top: 24px;
        border-radius: 4px;
    }
    .color-father {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .no-margin {
        margin: 0;
    }
    .region-title {
        height: 26px;
        background: #fef0cc;
        border-radius: 2px;
        padding-left: 6px;
        font-size: 12px;
        color: #595959;
        line-height: 26px;
        font-weight: 400;
        margin-bottom: 16px;
    }
    .no-data-img {
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .no-data-msg {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #595959;
    }
    .right-top {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .tip-top-box {
        padding: 0 5px;
        border-radius: 2px;
        color: #fff;
        font-weight: 800;
    }
    .text-line-div {
        text-decoration: underline;
    }
    .tip1 {
        margin-left: 24px;
        display: flex;
        align-items: center;
    }
    .box1 {
        width: 32px;
        height: 8px;
        margin-left: 8px;
    }
    .tip-title {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        line-height: 26px;
        display: flex;
        gap: 2px;
    }
    .title-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
    }
    .title-weight {
        font-size: 18px;
        color: #262626;
        letter-spacing: 0;
        line-height: 26px;
        font-weight: 500;
        font-family: PingFangSC-Medium;
    }
    .svg-icon {
        position: relative;
        top: 5px;
    }
</style>
